<template>
	<view class="apps">
		<uv-form :model="form" :rules="rules" ref="form" labelPosition="top" labelWidth="100%">
			<uv-form-item label="活动图片" prop="image">
				<uv-upload 
					:fileList="fileList" 
					name="1" 
					:maxCount="1"
					:deletable="false"
					@afterRead="afterRead" 
					:previewFullImage="false"
					width="750rpx"
					height="420rpx"
				></uv-upload>
			</uv-form-item>
			<uv-form-item label="活动标题" prop="title">
				<uv-textarea v-model="form.title" :maxlength="-1" autoHeight placeholder="请输入标题"></uv-textarea>
			</uv-form-item>
			<uv-form-item label="活动内容" prop="content">

			</uv-form-item>
			
			<uv-form-item label="开始时间" prop="start_time_str"  @click="startOpen">
				<view style="border-radius:4px;padding:15rpx;border:1px solid #eee; flex:1">
				<uv-input v-model="form.start_time_str" disabled disabledColor="#ffffff" placeholder="请选择时间" border="none">
				</uv-input>
				</view>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="结束时间" prop="end_time"  @click="endOpen">
				<view style="border-radius:4px;padding:15rpx;border:1px solid #eee; flex:1">
				<uv-input v-model="form.end_time_str" disabled disabledColor="#ffffff" placeholder="请选择时间" border="none">
				</uv-input>
				</view>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="城市" prop="city"  @click="openPicker">
				<view style="border-radius:4px;padding:15rpx;border:1px solid #eee; flex:1">
				<uv-input v-model="form.city_str" disabled disabledColor="#ffffff" placeholder="请选择城市" border="none">
				</uv-input>
				</view>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="详细地址" prop="address">
				<uv-textarea v-model="form.address" :maxlength="-1" autoHeight placeholder="请输入标题"></uv-textarea>
			</uv-form-item>
		</uv-form>
		<uv-button @click="submit">提交</uv-button>
		<uv-picker ref="picker" :columns="addressList"  keyName="name" @change="change" @confirm="confirm"></uv-picker>
		<uv-datetime-picker ref="startPicker" :minDate="timetamp"  mode="datetime" @confirm="startconfirm"></uv-datetime-picker>
		<uv-datetime-picker ref="endPicker" :minDate="timetamp"  mode="datetime" @confirm="endconfirm"></uv-datetime-picker>
	</view>
</template>

<script>
	let app;
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		components: {
		      mpHtml
		    },
		data() {
			return {
				timetamp:0,
				pickerValue: [0, 0, 0],
				defaultValue: [1341, 1342, 1343],
				provinces:[],
				citys:[],
				areas:[],
				fileList: [],
				form: {
					title: '',
					image: [],
					start_time:'',
					end_time:'',
					start_time_str:'',
					end_time_str:'',
					city_str:'',
					city:'',
					content:'',
				},
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					}],
					image: {
						type: 'string',
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					},
					start_time:{
						type:'string',
						required:true,
						message: '请选择开始时间',
						trigger: ['blur', 'change']
					},
					end_time:{
						type:'string',
						required:true,
						message: '请选择结束时间',
						trigger: ['blur', 'change']
					},
					address:{
						type:'string',
						required:true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onLoad(){
			app = this;
			this.getArea();
			
			const time = new Date();
			time.setHours(0,0,0,0);
			this.timetamp = parseInt (time.getTime())
		},
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		methods: {
			change(e) {
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs,true)
				}
			},
			openPicker() {
				this.$refs.picker.open();
				this.handlePickValueDefault()
			},
			confirm(e) {
				console.log('确认选择的地区：', e);
				this.form.city_str = e.value[0].name+'/'+e.value[1].name+'/'+e.value[2].name;
				this.form.city = e.value[0].id+','+e.value[1].id+','+e.value[2].id;
			},
			startOpen() {
				this.$refs.startPicker.open();
			},
			startconfirm(e) {
				
				this.form.start_time_str = uni.$uv.timeFormat(e.value,'yyyy-mm-dd hh:MM');
				this.form.start_time = e.value/1000;
			},
			endOpen() {
				this.$refs.endPicker.open();
			},
			endconfirm(e) {
				this.form.end_time_str = uni.$uv.timeFormat(e.value,'yyyy-mm-dd hh:MM');
				this.form.end_time = e.value/1000;
			},
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showToast({
						icon: 'success',
						title: '校验通过'
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})
			},
			afterRead(e) {
				// 这里直接模拟上传成功，这里的真实逻辑参考uv-upload组件示例
				setTimeout(() => {
					this.fileList = [{
						url: 'https://via.placeholder.com/100x100.png/3c9cff'
					}, {
						url: 'https://via.placeholder.com/100x100.png/ff0000'
					}]
					this.form.image = this.fileList;
					this.$refs.form.validateField('image', err => {
						// 处理错误后的逻辑
					})
				})
			},
			getArea(){
				app.request({
					url:"/area",
					success:function(rlt){
						const { code, data } = rlt
						if(code == 1){
							app.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
							console.log(app.provinces);
							app.handlePickValueDefault()
						}
					},
				});
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => item.id === this.defaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				console.log(this.citys);
				this.pickerValue[1] = this.citys.findIndex(item => item.id === this.defaultValue[1]);
				
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				console.log(this.areas);
				this.pickerValue[2] = this.areas.findIndex(item => item.id === this.defaultValue[2]);
				console.log(this.pickerValue);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
				this.form.city_str = this.provinces[this.pickerValue[0]].name+'/'+this.citys[this.pickerValue[1]].name+'/'+this.areas[this.pickerValue[2]].name;
				this.form.city = this.provinces[this.pickerValue[0]].id+','+this.citys[this.pickerValue[1]].id+','+this.areas[this.pickerValue[2]].id;
			},
		}
	}
</script>

<style>

</style>
